{extend name="admin@public/layout/popup"}

{block name="body"}
<div class="layui-card" style="margin-bottom:10px;">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" click_search="true" field="file_type" field_val="">全部</li>
            <li click_search="true" field="file_type" field_val="images">图片</li>
            <li click_search="true" field="file_type" field_val="video">视频</li>
            <li click_search="true" field="file_type" field_val="audio">音频</li>
            <li click_search="true" field="file_type" field_val="file">文件</li>
        </ul>
    </div>
</div>
<div class="search-form-page-tab-content" id="search-form" style="display:none;">
    <div class="layui-form layui-card-header" style="height:auto;padding:0;">
        <form class="layui-form-item layui-form-pane" is_search="true" style="margin-bottom:0px;">
            <div class="layui-inline" style="padding-left: 10px;">
                <label class="layui-form-label" title="文件路径">文件路径</label>
                <div class="layui-input-inline">
                    <input type="text" id="file_path" name="search_param[file_path][value]" placeholder="请输入文件路径" class="layui-input">
                    <input type="hidden" name="search_param[file_path][condition]" value="LIKE">
                </div>
            </div>

		    <div class="layui-inline" style="padding-left: 10px;">
                <label class="layui-form-label" title="文件类型">文件类型</label>
                <div class="layui-input-inline">
                    <select id="file_type" name="search_param[file_type][value]" placeholder="请输入文件类型">
        				<option value=""></option>
						<option value="images">图片</option>
						<option value="video">视频</option>
						<option value="audio">音频</option>
						<option value="file">文件</option>
                    </select>
                    <input type="hidden" name="search_param[file_type][condition]" value="=">
                </div>
            </div>

        <div class="layui-inline" style="padding-left: 10px;">
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit lay-filter="laytp"><i class="layui-icon"></i> 搜 索</button>
        </div>
        </form>
    </div>
</div>
<table class="laytp-table layui-hide-sm" lay-filter="default"></table>
<style>
    .form-footer{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:44px;
        line-height:44px;
        padding: 0 15px;
        background-color:#eee;
    }
</style>
<div class="form-footer">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <a class="layui-btn layui-btn-danger" id="sureCheck">确定选择</a>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
let id_val = "{$id_val}";
layui.use(['layTp'],function() {
    const
        func_controller = {}
        ,layTp = layui.layTp
        ,$ = layui.jquery
    ;

    const single_multi = '{$single_multi}';
    const accept = '{$accept}';
    const table_type = ( single_multi == 'single' ) ? 'radio' : 'checkbox';

    //表格渲染
    func_controller.table_render = function (where) {
        layui.table.render({
            elem: '.layui-hide-sm'
            , id: table_id
            , url: window.location.href
            , toolbar: '#default_toolbar'
            , where: where
            , even: true
            , method: 'GET'
            , cellMinWidth: 80
            , page: true
            , cols: [[
                {type:table_type}
				,{field:'id',title:'ID',align:'center',width:80}
				,{field:'file_path',title:'文件路径',align:'center',templet:function(d){
                    if(d.file_type == 'images'){
                        return layTp.facade.formatter.images(d.file_path);
                    }else if(d.file_type == 'video'){
                        return layTp.facade.formatter.video(d.file_path);
                    }else if(d.file_type == 'audio'){
                        return layTp.facade.formatter.audio(d.file_path);
                    }else{
                        return layTp.facade.formatter.file(d.file_path);
                    }
                }}
				,{field:'file_type',title:'文件类型',align:'center',templet:function(d){
					return layTp.facade.formatter.status('file_type',d.file_type,{"images":"图片","video":"视频","audio":"音频","file":"文件"});
				}}
				,{field:'create_time',title:'创建时间',align:'center'}
				//,{field:'delete_time',title:'删除时间',align:'center'}
            ]]
        });
    }

    $('#sureCheck').click(function(){
        let multi_spe = ';';
        let checkStatus = layui.table.checkStatus(table_id);
        let checkData = checkStatus.data;
        let file_path_arr = [];
        for(key in checkData){
            file_path_arr.push(checkData[key].file_path);
        }
        let file_path_str = file_path_arr.join(multi_spe);
        // $("#input_"+id_val, parent.document).val(file_path_str);

        if(single_multi == 'multi'){
            //预览
            if(accept == 'images') {
                for(key in checkData){
                    $('#preview_' + id_val, parent.document).append(
                        '<li class="item_img">' +
                        '<div class="operate">' +
                        '<i class="upload_img_close layui-icon" file_url_data="' + checkData[key].file_path + '" node="'+id_val+'"></i>' +
                        '</div>' +
                        '<img src="' + checkData[key].file_path + '" class="img" >' +
                        '</li>'
                    );
                }
            }else if(accept == 'video'){
                for(key in checkData) {
                    $('#preview_' + id_val, parent.document).append(
                        '<li class="item_video">' +
                        '<video src="' + checkData[key].file_path + '" controls="controls" width="200px" height="200px"></video>' +
                        '<button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="' + checkData[key].file_path + '" node="'+id_val+'"><i class="layui-icon">&#xe640;</i></button>' +
                        '</li>'
                    );
                }
            }else if(accept == 'audio'){
                for(key in checkData) {
                    $('#preview_' + id_val, parent.document).append(
                        '<li class="item_audio">' +
                        '<audio src="' + checkData[key].file_path + '" controls="controls" style="height:54px;"></audio>' +
                        '<button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="' + checkData[key].file_path + '" node="'+id_val+'"><i class="layui-icon">&#xe640;</i></button>' +
                        '</li>'
                    );
                }
            }
            //隐藏input框增加文件值
            let input_value = $('#input_'+id_val, parent.document).val();
            if(input_value){
                $('#input_'+id_val, parent.document).val( input_value + multi_spe + file_path_str );
            }else{
                $('#input_'+id_val, parent.document).val( file_path_str );
            }
        }else{
            //预览
            if(accept == 'images') {
                $('#preview_' + id_val, parent.document).html(
                    '<li class="item_img">' +
                    '<div class="operate">' +
                    '<i class="upload_img_close layui-icon" file_url_data="' + file_path_str + '" node="'+id_val+'"></i>' +
                    '</div>' +
                    '<img src="' + file_path_str + '" class="img" >' +
                    '</li>'
                );
            }else if(accept == 'video'){
                $('#preview_' + id_val, parent.document).html(
                    '<li class="item_video">' +
                    '<video src="' + file_path_str + '" controls="controls" width="200px" height="200px"></video>' +
                    '<button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="' + file_path_str + '" node="'+id_val+'"><i class="layui-icon">&#xe640;</i></button>' +
                    '</li>'
                );
            }else if(accept == 'audio'){
                $('#preview_' + id_val, parent.document).html(
                    '<li class="item_audio">' +
                    '<audio src="' + file_path_str + '" controls="controls" style="height:54px;"></audio>' +
                    '<button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="' + file_path_str + '" node="'+id_val+'"><i class="layui-icon">&#xe640;</i></button>' +
                    '</li>'
                );
            }
            //隐藏input框增加文件值
            $('#input_'+id_val, parent.document).val( file_path_str );
        }

        let index = parent.layui.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layui.layer.close(index); //再执行关闭
    });

    func_controller.table_render();

    window.func_controller = func_controller;

    let li_field_val;
    layui.each($("li[click_search='true']"),function(key,item) {
        li_field_val = $(item).attr('field_val');
        if( li_field_val == accept ){
            $(item).click();
        }
    });
});
</script>
{/block}

{block name="js_template"}
<script type="text/html" id="default_toolbar">
    <div class="layui-table-tool-temp">
        <div class="layui-btn-group fl">
            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm show-hidden-search-form layui-icon layui-icon-search">&nbsp;筛选</a>
        </div>
    </div>
</script>
{/block}